<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="template.xhtml">

	<ui:define name="content">
	
	<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript"></script>
			
	<p:growl id="messages" showDetail="true" />  
  
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"   
    style="width:600px;height:400px"  
    model="#{mapBean.emptyModel}"   
    onPointClick="handlePointClick(event);"   
    widgetVar="map" />  
      
<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">  
    <h:form prependId="false">  
        <h:panelGrid columns="2">  
            <h:outputLabel for="title" value="Nombre:" />  
            <p:inputText id="nombre" value="#{mapBean.title}" />
            
              <h:outputLabel for="title" value="Detalles" />  
            <p:inputText id="detalles" value="#{mapBean.title}" />
            
              <h:outputLabel for="title" value="Direccion:" />   
            <p:inputText id="direccion" value="#{mapBean.title}" /> 
            
              <h:outputLabel for="title" value="Telefono:" />  
            <p:inputText id="telefono" value="#{mapBean.title}" /> 
            
              <h:outputLabel for="title" value="Clasificacion:" />  
            <p:inputText id="clasificacion" value="#{mapBean.title}" />   
              
            <f:facet name="footer">  
                <p:commandButton value="Add"   
                        actionListener="#{mapBean.addMarker}"   
                        update="messages"   
                        oncomplete="markerAddComplete()"/>  
                <p:commandButton value="Cancel" onclick="return cancel()"/>  
            </f:facet>  
        </h:panelGrid>  
          
        <h:inputHidden id="lat" value="#{mapBean.lat}" />  
        <h:inputHidden id="lng" value="#{mapBean.lng}" />  
    </h:form>  
</p:dialog>  
  
<script type="text/javascript">  
    var currentMarker = null;  
      
    function handlePointClick(event) {  
        if(currentMarker == null) {  
            document.getElementById('lat').value = event.latLng.lat();  
            document.getElementById('lng').value = event.latLng.lng();  
  
            currentMarker = new google.maps.Marker({  
                position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())  
            });  
                              
            map.addOverlay(currentMarker);  
  
            dlg.show();  
        }     
    }  
  
    function markerAddComplete() {  
        var title = document.getElementById('title');  
        currentMarker.setTitle(title.value);  
        title.value = "";  
  
        currentMarker = null;  
        dlg.hide();  
    }  
  
    function cancel() {  
        dlg.hide();  
        currentMarker.setMap(null);  
        currentMarker = null;  
  
        return false;  
    }  
</script>  
	</ui:define>

</ui:composition>